<!DOCTYPE html>

<head>
	<meta charset="UTF-8">
	<title>数据列表页面</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta http-equiv="Access-Control-Allow-Origin" content="*">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<link rel="icon" href="favicon.ico">
	<link rel="stylesheet" href="../../assets/css/main.css">

</head>

<body>

<div class="x-body" id="app">
	<div class="layui-row">
		<form class="layui-form layui-col-md12 x-so">
			<div class="layui-inline">
				<div class="layui-input-inline">
					<input class="layui-input layui-input-sm" placeholder="开始日" name="start" id="start">
				</div>
				<div class="layui-input-inline">
					<input class="layui-input layui-input-sm" placeholder="截止日" name="end" id="end">
				</div>
				<div class="layui-input-inline">
					<input class="layui-input layui-input-sm" placeholder="用户名" name="username">
				</div>
				<button class="layui-btn layui-btn-sm" type="button">搜索</button>
			</div>
		</form>
	</div>
	
	<blockquote class="layui-elem-quote layui-elem-quote-sm">
		<button class="layui-btn layui-btn-sm layui-btn-danger" v-on:click="batchRemove">
			<i class="layui-icon">&#xe640;</i>批量删除</button>
		<button class="layui-btn layui-btn-sm" onclick="x_open_full('添加用户','user-add.html')">
			<i class="layui-icon">&#xe654;</i>添加</button>
	</blockquote>
	
	<div class="layui-form table-responsive">
		<table class="layui-table">
			<thead>
			<tr>
				<th width="16">
					<input type="checkbox" lay-filter="select-all" title="" lay-skin="primary">
				</th>
				<th>ID</th>
				<th>登录名</th>
				<th>手机</th>
				<th>邮箱</th>
				<th>角色</th>
				<th>加入时间</th>
				<th>状态</th>
				<th>操作</th>
			</thead>
			<tbody>
			<tr v-for="item in items">
				<td>
					<input type="checkbox" name="id" title="" lay-skin="primary">
				</td>
				<td>{{ item.id }}</td>
				<td>{{ item.username }}</td>
				<td>{{ item.mobile }}</td>
				<td>{{ item.email }}</td>
				<td>{{ item.role }}</td>
				<td>{{ item.addtime }}</td>
				<td class="td-status">
					<input v-if="item.status"
					       type="checkbox" name="status" lay-filter="status" checked
					       lay-skin="switch" lay-text="启用|禁用">
					<input v-else="item.status"
					       type="checkbox" lay-filter="status"
					       name="status"
					       lay-skin="switch" lay-text="启用|禁用">
				</td>
				
				<td class="td-manage">
					<button class="layui-btn layui-btn-default layui-btn-xs"
					        @click="userEdit(item)">编辑</button>
					<button class="layui-btn layui-btn-danger layui-btn-xs" v-on:click="removeMember(item)">删除</button>
				</td>
			</tr>
			</tbody>
		</table>
	</div>
	
	<div v-if="items.length==0" class="text-center layui-bg-gray no-records">对不起，暂无记录.</div>
	
	<!-- 分页组件 -->
	<div id="pagination" class="layui-box"></div>

</div>

<script type="text/javascript" src="../../js/libs/jquery.min.js "></script>
<script type="text/javascript" src="../../js/libs/layui/layui.js"></script>
<script type="text/javascript" src="../../js/libs/vue/vue.js"></script>
<script type="text/javascript" src="../../js/main.js"></script>
<script type="text/javascript" src="../../js/utils.js"></script>
<script>
	//全局数据
	var G = {
		dataListUrl: "./json/user-list.json", // 获取数据接口
		delUrl: "./json/user-del.json", // 删除后端接口
		statusUrl: "./json/user-status.json",
		page: 1,
		pagesize: 12
	};

	// 初始化日历控件
	layui.use('laydate', function () {
		var laydate = layui.laydate;

		//执行一个laydate实例
		laydate.render({
			elem: '#start' //指定元素
		});

		//执行一个laydate实例
		laydate.render({
			elem: '#end' //指定元素
		});
	});

	// 初始化 Vue 组件
	var APP = new Vue({
		el: '#app',
		// 数据
		data: {
			items: [],
			count: 500
		},

		// 逻辑处理方法
		methods: {
			//删除一行数据
			removeMember: function (item) {

				var that = this;
				var index = top.layer.confirm('确认要删除吗？', function () {
					top.layer.close(index);
					//发异步删除数据
					httpGet(G.delUrl, function (result) {
						messageOk("删除成功!");
						render(G.page, G.pasize);
					}, function (message) {
						messageError("删除失败!")
					})
				});

			},

			//批量删除
			batchRemove: function () {

				var index = top.layer.confirm('确认要删除吗？', function () {
					// 检查选项
					var selectItemsNum = $('input[name="id"]:checked').length;
					if (selectItemsNum <= 0) {
						top.layer.close(index);
						return messageInfo("请至少选中一条数据.");
					}

					// 发异步删除数据
					httpGet(G.delUrl, function (result) {
						messageOk("删除成功!");
						render(G.page, G.pasize);
					}, function (message) {
						messageOk("删除失败!");
					})

				});

			}, //end of batchRemove
			
			userEdit: function (item) {
				x_open_full('编辑用户','user-edit.html');
			}
		},

		mounted: function () {
			// 从后端获取数据
			render(G.page, G.pagesize);
			this.$nextTick(function () {
				layui.use(['laypage','form'], function () {
					var laypage = layui.laypage;
					var form = layui.form;
					// 重新渲染 form 元素
					form.render("checkbox");
					form.on('switch(status)', function(data){
						messageLoading();
						var status = data.elem.checked ? 1 : 0;
						setTimeout(function () {
							httpGet(G.statusUrl, {
								status: status
							}, function (res) {
								messageOk("操作成功！");
							}, function (error) {
								data.elem.checked = !data.elem.checked;
								form.render();
								messageError(error);
							})
						}, 500);
					})
					
					//执行一个laypage实例
					laypage.render({
						elem: 'pagination', //分页container ID，不用加 # 号
						limit: G.pagesize, //页面显示记录条数
						count: APP.$data.count, //数据总数，从服务端得到
						groups: 5,
						layout: ['prev', 'page', 'next','limit','count'],
						prev: '<i class="layui-icon layui-icon-left"></i>',
						next: '<i class="layui-icon layui-icon-right"></i>',
						jump: function (obj, first) {
							//首次不执行
							if (first) {
								//do something
								return;
							}
							render(obj.curr, obj.limit);
						}

					});

				});
			})
		}
	}); //end Vue

	/**
	 * 渲染数据列表
	 * @param page
	 * @param pagesize
	 */
	function render(page, pagesize) {

		httpGet(G.dataListUrl, {
			page: page,
			pagesize: pagesize
		}, function (result) {
			// 更新模型
			APP.$data.items = result.data;
			APP.$data.count = result.count;
		});

	}

</script>

</body>

</html>